<template>
    <div class="cmt-contanter">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要写的内容(最多输入120)个字" cols="30" rows="5" v-model="plmsg" ></textarea>
        <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>

        <div class="cmt-list" v-for="(item,i) in commentlist">
            <div class="cmt-item">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;用户:{{item.username}}&nbsp;&nbsp;发表时间:{{item.add_time}}
                </div>
                <div class="cmt-body">
                   {{item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getcomment">加载更多</mt-button>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                commentlist: [],
                plmsg:''
            }
        },
        methods: {
            getcomment() {
                this.$http.get('http://vue.studyit.io/aip/getcomment').then(res => {
                    this.commentlist.push(...res.body.commentlist)
                })
            },
            postcomment(){
                if (this.plmsg.trim().length===0){
                    return Toast('评论不能为空')
                }
                this.commentlist.unshift({
                    username: '匿名用户',
                    add_time: '07月23日 15:06 ',
                    content: this.plmsg.trim()
                })
                this.plmsg=''
            }
        },
        created() {
            this.getcomment()
        }
    }
</script>

<style scoped lang="scss">
    .cmt-contanter {
        h3 {
            font-size: 10px;
        }

        textarea {
            font-size: 14px;
            height: 85px;
            margin: 0;
        }

        .cmt-list {
            .cmt-item {
                font-size: 13px;

                .cmt-title {
                    line-height: 30px;
                    background-color: #ccc;
                }

                .cmt-body {
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>